<template>
  <div class="background">
    <img :src="imgSrc" width="100%" height="100%" alt="" />
  <div class="main"  style= "background-color:white">
    <div class="demo-type">

      <div>
        <el-avatar shape="square" :size="50" icon="el-icon-user-solid"></el-avatar>
      </div>

      <br><br>

      <el-tabs type="border-card"  >
        <el-tab-pane label="手机登录"  >
          <el-input placeholder="请输入手机号" v-model="form.account" clearable></el-input>
          <br><br>
          <el-input placeholder="请输入密码" v-model="form.passWord" show-password></el-input>
          <br><br>
          <el-button type="info" round @click="Login1()" >点击登录</el-button>
        </el-tab-pane>
      </el-tabs>

      <br>

      <p id="rg" @click="register" >未注册？ 点击注册</p>
      <p id="re" @click="retrieve">找回密码</p>

      <br><br>
    </div>
  </div>
  </div>
</template>

<script>
import {post,get} from "../common/serviceUtil";
export default {
  name: "login",

  data() {
    return {
      imgSrc:require('../../static/image/login.jpg'),
      form:{
        account:"",
        passWord:""
      }
    }

  },

  methods:{
      register:function (){
        this.$router.push({ path:'/register'})
      },
      retrieve:function (){
        this.$router.push({ path:'/retrieve'})
      },

      Login1:function (){
        var that = this;
        post("/login",this.form).then(
          function (respone){
          if(respone.data.status==1){
            that.$router.replace('/Try')
          }
        }).catch(function (a){
          alert("shit")
        })
    }
  }

}
</script>

<style scoped>
.main {
  width: 400px;
  border: 25px solid rgba(84, 92, 100, 0.27);
  padding: 25px ;
  margin: 25px;
  position: absolute;
  left:50%;margin-left:-250px;top:35%;
  margin-top:-190px;

}

#rg{
  position: absolute;
  border-style:dashed;
  border-width:5px;
  border-color: rgba(21, 19, 18, 0.47);
}

#re{
  position: absolute;
  left: 350px;
  border-style:dashed;
  border-width:5px;
  border-color: rgba(21, 19, 18, 0.47);
}

.background{
  width:100%;
  height:100%;  /**宽高100%是为了图片铺满屏幕 */
  z-index:-1;
  position: fixed;
}


</style>
